<template>
  <view class="nl-group-chat-avatar__wrap" :style="wrapStyle">
    <view class="nl-group-chat-avatar" :style="avatarStyle">
      <view
        v-if="length === 5 || length === 6"
        class="nl-group-chat-avatar__placeholder"
      ></view>
      <image
        :class="imgClass"
        :style="{ borderRadius: imgBorderRadius }"
        :mode="mode"
        :src="item.picture ? item.picture : defaultImage"
        v-for="(item, index) in imgList"
        :key="index"
      ></image>

      <view
        v-if="length === 5 || length === 6"
        class="nl-group-chat-avatar__placeholder"
      ></view>
    </view>
    <view
      v-if="isDot"
      class="nl-group-chat-avatar__wrap-dot"
      :style="dotStyle"
    ></view>
  </view>
</template>
<script>
import request from "@/util/request";

export default {
  data() {
    return {
      defaultImage: "/static/image/90.png",
    };
  },
  props: {
    imgs: {
      type: Array,
      default: () => [],
    },
    size: {
      type: [String, Number],
      default: 46,
    },
    round: {
      type: [String, Number],
      default: 4,
    },
    padding: {
      type: [String, Number],
      default: 1.5,
    },
    backgroundColor: {
      type: String,
      default: "#dddbd9",
    },
    imgRound: {
      type: [String, Number],
      default: 0,
    },
    mode: {
      type: String,
      default: "scaleToFill",
    },
    isDot: {
      type: Boolean,
      default: false,
    },
    dotSize: {
      type: [String, Number],
      default: 10,
    },
    dotColor: {
      type: String,
      default: "#fa5151",
    },
    dotOffset: {
      type: Array,
      default: () => [-4, -4],
    },
  },
  computed: {
    imgList() {
      return this.imgs.length > 9 ? this.imgs.slice(0, 9) : this.imgs;
    },
    length() {
      return this.imgList.length;
    },
    imgClass() {
      return `nl-group-chat-avatar__img${this.length}`;
    },
    imgBorderRadius() {
      return this.addUnit(this.imgRound);
    },
    wrapStyle() {
      const size = this.addUnit(this.size);
      return `width: ${size};height: ${size}`;
    },
    avatarStyle() {
      const size = this.addUnit(this.size);
      const borderRadius = this.addUnit(this.round);
      const padding = this.addUnit(this.padding);
      return `width: ${size};height: ${size};background-color:${this.backgroundColor};border-radius:${borderRadius};padding:${padding}`;
    },
    dotStyle() {
      const size = this.addUnit(this.dotSize);
      const top = this.addUnit(this.dotOffset[0]);
      const right = this.addUnit(this.dotOffset[1]);
      return `width: ${size};height: ${size};background-color:${this.dotColor};top:${top};right:${right}`;
    },
  },
  methods: {
    isNumber(value) {
      return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value);
    },
    addUnit(value = "auto") {
      value = String(value);
      return this.isNumber(value) ? `${value}px` : value;
    },
  },
};
</script>
<style scoped>
.nl-group-chat-avatar__wrap {
  position: relative;
}
.nl-group-chat-avatar__wrap-dot {
  position: absolute;
  border-radius: 50%;
}
.nl-group-chat-avatar {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.nl-group-chat-avatar__placeholder {
  width: 90%;
  height: 15%;
}

.nl-group-chat-avatar__img1 {
  width: 100%;
  height: 100%;
}
.nl-group-chat-avatar__img2,
.nl-group-chat-avatar__img3,
.nl-group-chat-avatar__img4 {
  width: 48%;
  height: 48%;
}

.nl-group-chat-avatar__img3:nth-child(1) {
  margin: 0 20%;
}
.nl-group-chat-avatar__img5,
.nl-group-chat-avatar__img6,
.nl-group-chat-avatar__img7,
.nl-group-chat-avatar__img8,
.nl-group-chat-avatar__img9 {
  width: 31%;
  height: 31%;
}
.nl-group-chat-avatar__img5:nth-child(2) {
  margin-left: 16.6666666%;
}
.nl-group-chat-avatar__img5:nth-child(3) {
  margin-right: 16.6666666%;
}
.nl-group-chat-avatar__img7:nth-child(1) {
  margin: 0 30%;
}
.nl-group-chat-avatar__img8:nth-child(1) {
  margin-left: 16.6666666%;
}
.nl-group-chat-avatar__img8:nth-child(2) {
  margin-right: 16.6666666%;
}
</style>
